<template>
	<view>
		<view class="new">
			<view class="new_title">{{news.title}}</view>
			<image :src="host+news.cover" mode="aspectFit"></image>
			<view class="new_content" v-html="content"></view>
		</view>
		<view class="comment">
			<view class="title">评论:</view>
			<textarea class="comment_input" v-model="comment_input" placeholder="请输入评论内容">

			</textarea>
			<button @click="comment_sub" size="mini" type="primary">提交</button>
			<button v-if="!isShow" @click="showComment" size="mini" type="primary">查看所有评论</button>
			<CommitList v-if="isShow" :commitRows="comment_rows"></CommitList>
		</view>
		<view class="top_news">
			<view class="title">新闻推荐</view>
			<view class="article-list" v-for="(item,key) in newsRows" :key="key">
				<!-- 文章列表组件 -->
				<ArticleList v-for="(article,index) in item" :key="index" :article="article"
					goDetailsUrl="../newsDetails/newsDetails?id=">
				</ArticleList>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		getImg
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				isShow:false,
				news: {},
				host: uni.getStorageSync("BASE_URL"),
				top_news: {},
				comment_input: "",
				is_login: uni.getStorageSync("token") || false,
				id: "",
				content: "",
				newsRows: {},
				comment_rows: [],
			}
		},
		onLoad(data) {
			let that = this;
			this.id = data.id;
			http({
				url: "/prod-api/press/press/" + data.id,
				type: "application/x-www-form-urlencoded"
			}).then((res) => {
				that.news = res.data.data;
				that.content = that.news.content;
				let str = '<img src="';
				let index = that.content.indexOf(str);
				while (index !== -1) {
					that.content = that.content.substring(0, index + str.length) + that.host + (that.content
						.substring(index + str.length));
					index = that.content.indexOf(str, index + str.length);
				}
				uni.setNavigationBarTitle({
					title: that.news.title
				})
			});
			http({
				url: "/prod-api/press/press/list",
				data: {
					"top": "Y"
				},
				type: "application/x-www-form-urlencoded"
			}).then((res) => {
				that.newsRows = {
					row: res.data.rows
				}
			})
		},
		methods: {
			goNews(id) {
				go_news(id);
			},
			comment_sub() {
				const that = this;
				if (this.is_login) {
					if (this.comment_input != "") {
						http({
							url: "/prod-api/press/pressComment",
							data: {
								content: that.comment_input,
								newsId: that.id
							},
							method: "POST",
							type: "application/json"
						}).then((res) => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '评论成功',
									duration: 2000
								});
								if(that.isShow){
									that.showComment()
								}
							}
						})
					} else {
						uni.showToast({
							title: '评论内容不能为空',
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: '请先登录再评论',
						icon: 'none',
						duration: 2000
					});
				}
			},
			showComment(){
				let that=this
				that.isShow=true
				uni.showLoading({
					title: "加载中...请稍等"
				})
				http({
					url: "/prod-api/press/comments/list",
					data: {
						newsId: that.id
					},
				}).then((res) => {
					that.comment_rows = res.data.rows
					that.$nextTick(() => {
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>

<style>
	.new {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 15rpx 40rpx;
		background-color: rgb(236, 240, 241);
	}

	.new .new_title {
		font-size: 1.5rem;
		text-align: center;
		align-self: center;
	}

	.new image {
		align-self: center;
	}

	.new .new_content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.new_content img {
		width: 100%;

	}

	.top_news {
		width: 90%;
		margin: 40rpx auto;
	}

	.top_news>.title,
	.comment>.title {
		font-size: 1.2rem;
	}

	.comment {
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: rgb(236, 240, 241);
		padding: 20rpx;
	}

	.comment textarea {
		padding-left: 2rem;
		flex: 1;
	}

	.comment button {
		margin: 10rpx;
	}

	.article-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.article-list>* {
		padding: 1rem;
		border-bottom: 1px solid #ccc;
	}
</style>
